<template>
  <div class="">
    <el-row :gutter="10">
      <el-col :span="3">
        <div class="panel one">
          <div class="context">
            <p>上线{{ type == 'service' ? '服务' : '事件' }}总数</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}Num`] ??= 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="panel two">
          <div class="context">
            <p>新增上线{{ type == 'service' ? '服务' : '事件' }}</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}IncreaseNum`] ??= 0 }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="panel two">
          <div class="context">
            <p>累计{{ type == 'service' ? '调用' : '推送' }}次数</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}InvokeNum`] ??= 0 }}</div>
          </div>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="panel two">
          <div class="context">
            <p>平均{{ type == 'service' ? '调用' : '推送' }}时长</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}AverageTime`] ??= 0 }} <i>ms</i></div>
          </div>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="panel two">
          <div class="context">
            <p>{{ type == 'service' ? '调用' : '推送' }}成功次数</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}InvokeSuccess`] ??= 0 }}</div>
          </div>
        </div>
      </el-col>

      <el-col :span="3">
        <div class="panel two">
          <div class="context">
            <p>{{ type == 'service' ? '调用' : '推送' }}失败次数</p>
            <div>{{ infoData[`${type == 'service' ? 'service' : 'evt'}InvokeFailed`] ??= 0 }}</div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="panel four">
          <div class="context">
            <p>订阅量最高的{{ type == 'service' ? '服务' : '事件' }}</p>
            <div class="content" :title="infoData[`${type == 'service' ? 'service' : 'evt'}SubscribeMaxName`] ??= '-'">
              <b>{{ infoData[`${type == 'service' ? 'service' : 'evt'}SubscribeMaxName`] ??= '-' }}</b>
              <span>订阅：{{ infoData[`${type == 'service' ? 'service' : 'evt'}SubscribeMaxNum`] ??= 0 }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="60">
      <el-col :span="12">
        <h6>{{ type == 'service' ? '服务调用' : '事件推送' }}排行</h6>
        <TopList v-model="rankList" />
      </el-col>
      <el-col :span="12">
        <h6>部门{{ type == 'service' ? '服务调用' : '事件推送' }}排行</h6>
        <TopList v-model="orgRankList" />
      </el-col>
    </el-row>
    <section>
      <h6>{{ type == 'service' ? '服务调用' : '事件推送' }}次数趋势</h6>
      <LineChart :time="time" :code="code" :type="type" :xAxisData="xAxisData" :chartData="chartData" />
    </section>
  </div>
</template>

<script>
import { defineComponent, watch, computed, ref, onMounted } from "vue";

import {
  getServiceCount,
  getEventCount,
  getEvtOrgRank,
  getEvtRank,
  getEvtTrend,
  getSvcRank,
  getSvcOrgRank,
  getSvcTrend
} from '@/api/statistics';
import TopList from '../components/TopList.vue'
import LineChart from '../components/LineChart.vue'

export default defineComponent({
  name: "AssetGroup",
  props: {
    type: {
      type: String,
      default: "service",
    },
    time: { // 时间
      type: Object,
      default: () => { }
    },
    code: { // 地区code
      type: String,
      default: ''
    }
  },
  components: { TopList, LineChart },
  setup(props, { emit }) {
    watch(() => props.time, (val) => {
      init()
    })
    watch(() => props.code, (val) => {
      init()
    })
    const init = async () => {
      const startDate = props.time?.startDate
      const endDate = props.time?.endDate
      const para = {
        areaCode: props.code,
        endDate,
        startDate
      }
      getData(para)
      getRankData(para)
      getOrgData(para)
      getTrendData(para)
    }
    // 统计
    const infoData = ref({})
    const getData = async (para) => {
      const res = props.type === 'service' ? await getServiceCount(para) : await getEventCount(para)
      if (res.status == 200) {
        infoData.value = res.data
      } else {
        infoData.value = Object.keys(infoData.value).forEach(key => (infoData.value[key] = null))
      }
    }
    // 部门调用排行
    const orgRankList = ref([])
    const getOrgData = async (para) => {
      const res = props.type === 'service' ? await getSvcOrgRank(para) : await getEvtOrgRank(para)
      if (res.status == 200) {
        orgRankList.value = res.data
      } else {
        orgRankList.value = []
      }
    }
    // 调用排行
    const rankList = ref([])
    const getRankData = async (para) => {
      const res = props.type === 'service' ? await getSvcRank(para) : await getEvtRank(para)
      if (res.status == 200) {
        rankList.value = res.data
      } else {
        rankList.value = []
      }
    }
    const xAxisData = ref([])
    const chartData = ref([])
    const getTrendData = async (para) => {
      const { startDate, endDate ,areaCode} = para
      const diff = (new Date(endDate).getTime() - new Date(startDate).getTime()) / 86400000
      let type = 0
      if(diff <= 31) {
        
      } else 
      switch (true) {
        case diff <= 31:
          type = 0;
          break;
        case diff > 31 && diff <= 366:
          type = 1;
          break;
        case diff > 366:
          type = 2;
          break;
      }
      const params = {
        startDate, endDate, type, areaCode
      }
      const res = props.type === 'service' ? await getSvcTrend(params) : await getEvtTrend(params);
      if (res.status === 200) {
        chartData.value = res.data.y
        xAxisData.value = res.data.x
      }
    };

    return {
      infoData,
      orgRankList,
      rankList,
      xAxisData,
      chartData
    };
  },
});
</script>

<style lang="scss" scoped>
.panel {
  display: flex;
  justify-items: center;
  padding: 14px;

  img {
    width: 48px;
    height: 48px;
  }

  height: 80px;
  background: #F6F9FF;
  border-radius: 8px;

  .context {
    width: 100%;
    color: #3C475D;

    p {
      font-size: 13px;
      font-weight: 400;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    div {
      font-size: 20px;
      font-weight: 600;
      position: relative;

      &.content {
        padding-right: 60px;
      }

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      i {
        display: inline-block;
        margin-left: 5px;
        font-style: normal;
        font-size: 13px;
        font-weight: 400;
        color: #3C475D;
      }

      span {
        position: absolute;
        right: 0;
        bottom: 5px;
        font-size: 13px;
        font-weight: 400;
        color: #858C99;
      }

      b {
        font-size: 18px;
      }
    }
  }

}

h6 {
  color: #3C475D;
  font-size: 14px;
  margin: 20px 0;
  margin-top: 40px;
}
</style>
